<template>
    <view class="log-item" @click="gotoDetail(data)">
        <view class="log-top">
            <image class="log-top-bg" mode="widthFix" src="/static/images/icon/icon-item-bg-blue.png"></image>
            <view class="log-top-center flex1">
				<u--text 
				:lines="1" 
				color="#006EFF"
				:text="data.swCheckSituation"
				></u--text>
			</view>
        </view>
        <view class="log-content">
			<view class="flex-between font-24 text-grey1  ">
			    巡查时间：{{ data.swCheckTime }}
			</view>
			<view class="log-line"></view>
            <view class="margin-16">巡查区域：{{ data.swLocation }} </view>
		<view class="margin-16">处置结果：{{ data.swCheckResult }} </view>
            <view class="flex-between text-grey1 margin-16">
                <view class="flex1"></view>
                <view class="flex1">所属网格：{{ data.gridName }}</view>
            </view>
            <!-- <view class="ellipsis  text-grey1  margin-16">网格员：{{ data.gridName }}</view> -->
            
            
        </view>
    </view>
</template>

<script>

export default {
    name: 'LogItem',
    props: {
        data: {
            type: Object, default: {
                id: 1,
                taskStatus: 1
            }
        }
    },
    computed: {
    },
    methods: {
        gotoDetail(item) { 
         uni.navigateTo({ url:`/pages/patrolLog/detail/index?id=${item.id}` })
        },
    }
}
</script>
<style lang="scss">
.log-item {
    width: 686rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    margin: auto;

    .log-top {
        height: 64rpx;
        background-image: linear-gradient(90deg, #006eff33 2%, #006eff0a 100%);
        display: flex;
        align-items: center;
        position: relative;
        padding: 0 28rpx;
        font-weight: bold;
        font-size: 28rpx;
        color: #006EFF;
		.log-top-center{
			 color: #006EFF;
		}
        .log-top-bg {
            width: 686rpx;
            height: 64rpx;
            position: absolute;
            top: 0;
            left: 0;
        }

        .log-top-right {
            width: 100rpx;
            text-align: right;
            font-size: 24rpx;
        }
    }

    .log-top-red {
        background-image: linear-gradient(90deg, #ff11031c 2%, #f92e200d 100%);
        color: #FF1103;
    }

    .log-top-green {
        background-image: linear-gradient(90deg, #07c1601c 2%, #0cc2640d 100%);
        color: #07C160;
    }

    .margin-16 {
        margin: 16rpx 0;
    }

    .log-line {
        width: 100%;
        height: 2rpx;
        background: #EEEEEE;
        margin: 16rpx 0 16rpx;
    }

    .log-content {
        background: #FFFFFF;
        box-shadow: 0 4rpx 12rpx 0 #1e71fe14;
        padding: 24rpx;
    }

    .log-btn {
        font-weight: 500;
        font-size: 24rpx;
        color: #006EFF;
        text-align: center;
        width: 100%;
        height: 70rpx;
        line-height: 70rpx;
    }
}
</style>
